<template>
  <!-- 手机号登录 -->
  <div class="login-box">
    <!-- 顶部按钮 -->
    <div class="t-btn">
      <div
        class="phone"
        @click="showPhoneLogin"
        :class="phoneLogin ? 'is-active' : ''"
      >
        手机号登录
      </div>
      <div
        class="email"
        @click="showEmailLogin"
        :class="phoneLogin ? '' : 'is-active'"
      >
        邮箱登录
      </div>
    </div>
    <!-- 手机号登录 -->
    <div v-if="phoneLogin">
      <!-- 表单 -->
      <div class="form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules">
          <el-form-item prop="phone">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机号" />
          </el-form-item>
          <el-form-item prop="phonePassword">
            <el-input
              v-model="ruleForm.phonePassword"
              placeholder="请输入密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 单选框和忘记密码 -->
      <div class="check-and-forget">
        <div class="check">
          <el-checkbox v-model="checked"></el-checkbox>
          <div class="agree">
            阅读并同意<a href="">服务协议</a>和<a href="">隐私协议</a>
          </div>
        </div>
        <div class="forget"><a href="">忘记密码</a></div>
      </div>
      <!--  登录按钮  -->
      <div class="login">
        <button @click="submitForm(ruleFormRef)">登录</button>
      </div>
      <div class="to-register">
        <span @click="toRegister">还没有账号 ？去注册 !</span>
      </div>
    </div>
    <!-- 邮箱登录 -->
    <div v-else>
      <!-- 表单 -->
      <div class="form">
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="emailRules">
          <el-form-item prop="email">
            <el-input v-model="ruleForm.email" placeholder="请输入邮箱账号" />
          </el-form-item>
          <el-form-item prop="emailPassword">
            <el-input
              v-model="ruleForm.emailPassword"
              placeholder="请输入密码"
            />
          </el-form-item>
        </el-form>
      </div>
      <!-- 单选框和忘记密码 -->
      <div class="check-and-forget">
        <div class="check">
          <el-checkbox v-model="checked"></el-checkbox>
          <div class="agree">
            阅读并同意<a href="">服务协议</a>和<a href="">隐私协议</a>
          </div>
        </div>
        <div class="forget"><a href="">忘记密码</a></div>
      </div>
      <!--  登录按钮  -->
      <div class="login">
        <button @click="submitForm(ruleFormRef)">登录</button>
      </div>
      <div class="to-register">
        <span @click="toRegister">还没有账号 ？去注册 !</span>
      </div>
    </div>
  </div>
  <register-dialog
    @close="closeRegisterDialog"
    :dialogVisible="registerDialogVisible"
  ></register-dialog>
</template>
<script>
import registerDialog from "@/components/global/registerDialog.vue";
import { reactive, ref } from "@vue/reactivity";
import { useRouter } from "vue-router";
export default {
  components: {
    registerDialog,
  },
  setup() {
    const ruleFormRef = ref(null);
    const router = useRouter();
    let phoneLogin = ref(true);
    // 切换手机号登录
    const showPhoneLogin = () => {
      phoneLogin.value = true;
    };
    // 切换手机号显示
    const showEmailLogin = () => {
      phoneLogin.value = false;
    };
    // 控制注册弹窗
    let registerDialogVisible = ref(false);
    // 去注册
    const toRegister = () => {
      registerDialogVisible.value = true;
      // router.push({
      //   path: "./register",
      // });
    };
    const closeRegisterDialog = () => {
      registerDialogVisible.value = false;
    };

    // 勾选框勾选状态
    const checked = ref(false);
    const ruleForm = reactive({
      phone: undefined,
      phonePassword: undefined,
      email: undefined,
      emailPassword: undefined,
    });
    // 手机号登录校验规则
    const phoneRules = reactive({
      phone: [],
      phonePassword: [],
    });
    // 邮箱账号登录校验规则
    const emailRules = reactive({
      email: [],
      emailPassword: [],
    });
    // 提交表单
    const submitForm = async (ruleFormRef) => {
      console.log(ruleFormRef);
    };
    return {
      phoneRules,
      emailRules,
      ruleForm,
      submitForm,
      ruleFormRef,
      checked,
      phoneLogin,
      showPhoneLogin,
      showEmailLogin,
      toRegister,
      closeRegisterDialog,
      registerDialogVisible
    };
  },
};
</script>

<style lang="less">
@import url("./login.less");
</style>
<route lang="yaml">
meta:
  level: 1
  name: "Login"
  str: "登录"
  layout: loginLayout
</route>
